<template>
  <div class="call-message">
    <!-- 语音通话记录 -->
    <div v-if="message.messageType === MESSAGE_TYPE.VOICE_CALL" class="voice-call">
      <div class="call-content">
        <i class="el-icon-phone phone-icon-rotated"></i>
        <span>{{ message.content }}</span>
      </div>
    </div>
    
    <!-- 视频通话记录 -->
    <div v-else-if="message.messageType === MESSAGE_TYPE.VIDEO_CALL" class="video-call">
      <div class="call-content">
        <i class="el-icon-video-play" :class="videoIconClass"></i>
        <span>{{ message.content || "视频通话" }}</span>
        <span v-if="message.callStatus" class="call-status">
          {{ getCallStatusText(message.callStatus) }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CallMessage',
  props: {
    message: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      MESSAGE_TYPE: {
        VOICE_CALL: 4,
        VIDEO_CALL: 5
      }
    };
  },
  computed: {
    videoIconClass() {
      return this.message.isMyselfMsg ? 'video-icon-green' : 'video-icon-blue';
    }
  },
  methods: {
    // 获取通话状态文本
    getCallStatusText(status) {
      switch (status) {
        case 1:
          return "[已接]";
        case 2:
          return "[已挂断]";
        default:
          return "[未接]";
      }
    }
  }
}
</script>

<style scoped>
.call-message {
  display: inline-block;
}

.call-content {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: #f0f0f0;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
}

.phone-icon-rotated {
  transform: rotate(45deg);
  margin-right: 8px;
  color: #409eff;
}

.video-icon-green {
  color: #67c23a;
  margin-right: 8px;
}

.video-icon-blue {
  color: #409eff;
  margin-right: 8px;
}

.call-status {
  margin-left: 8px;
  font-size: 12px;
  color: #666;
}
</style>
